<template>
  <view class="scan-container">
    <!-- Scanner -->
    <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError">
      <view class="scan-line"></view>
      <!-- 新增的二维码提示文字 -->
      <view class="scan-placeholder">请对准需要识别的二维码</view>
    </mumu-get-qrcode>

    <!-- Tip Text -->
    <view class="tip-text">请对准需要识别的二维码</view>

    <!-- Black Footer -->
    <view class="footer">
      <view class="scan-text">扫一扫</view>
    </view>
  </view>
</template>

<script>
import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
export default {
  components: {
    mumuGetQrcode
  },
  methods: {
    qrcodeSucess(data) {
      uni.showModal({
        title: '成功',
        content: data,
        success: () => {
          uni.navigateBack({})
        }
      })
    },
    qrcodeError(err) {
      console.log(err)
      uni.showModal({
        title: '摄像头授权失败',
        content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
        success: () => {
          uni.navigateBack({})
        }
      })
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #1a1a1a;
  height: 100vh;
  color: #fff;
}

.scan-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

mumu-get-qrcode {
  width: 100vw;
  height: 100vw;
  position: relative;
  margin-top: 10vh;
}

.scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00a8ff 50%, transparent 100%);
  animation: scanMove 2s linear infinite;
  z-index: 2; /* 确保扫描线在最上层 */
}

/* 新增的扫描框内文字样式 */
.scan-placeholder {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  bottom: 20px; /* 距离底部20px */
  z-index: 1; /* 确保文字在扫描线下方但可见 */
  padding: 0 20px; /* 增加内边距防止边缘被裁剪 */
  box-sizing: border-box; /* 确保内边距不影响宽度 */
  text-shadow: 0 0 5px rgba(0,0,0,0.5); /* 添加文字阴影增强可读性 */
}

.tip-text {
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  margin-top: 30px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-text {
  color: #00a8ff;
  font-size: 16px;
}

@keyframes scanMove {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

/* Modal styles */
::v-deep .uni-modal {
  background: rgba(26, 26, 26, 0.95) !important;

  .uni-modal__bd {
    color: #fff !important;
  }

  .uni-modal__btn {
    color: #00a8ff !important;
  }
}
</style>